$(function(){
	var blockImg = '<div class="blockImg"><span class="bg-ul-img-l"><img src="images/bg-ul-img-l.png" width="20" height="100%"></span><span class="bul"></span><span class="bg-bottom"></span><span class="bur"></span><span class="bg-ul-img-r"><img src="images/bg-ul-img-r.png" width="20" height="100%"></span><span class="bg-ul-img"><img src="images/bg-ul-img.png" width="100%" height="100%"></span></div>';	
	var opacityLen = $('.opacity').length;
	function Resize() {
			$('.opacity').find(".picker-category").css("width","auto");				
			var opacity = $('.opacity:visible').find(".the-list");
			var widthAll = $(".slide-middle").width();
			var widthPickerList = $('.opacity:visible').find(".picker-category").width();		
			var widthPickerList = widthAll;
			//alert (widthPickerList)
			$('.opacity:visible').find(".picker-category").css("width", widthPickerList +"px");
			if (opacity.length > 4) {
				widthList = (widthPickerList / opacity.length) - 1;			
			}
			else {
				widthList = (780 / 4) - 1;		
			}			
			opacity.css("width", widthList +"px");	
	}
	function ResizeTheList() {
		for (a = 0; a < opacityLen; a++) {
			var opacity = $('.opacity').eq(a).find(".the-list");
			var widthAll = $(".slide-middle").width();
			var widthPickerList = $('.opacity').eq(a).find(".picker-category").width();
			var widthPickerList = widthAll;
			$('.opacity').find(".picker-category").css("width", widthPickerList +"px");
			if (opacity.length > 4) {
				widthList = (widthPickerList / opacity.length) - 1;
				widthList = Math.floor(widthList);			
			}
			else {
				widthList = (780 / 4) - 1;		
			}
			
			opacity.css("width", widthList +"px");
			
			for (i = 0; i < opacity.length; i++) {
				opacity.eq(i).find(".title").attr("rel", i);
				var listEq = opacity.eq(i);
				lengthListUL = listEq.find("ul li").length;	
						
				listEq.append('<div class="gradient-block"></div>');
				listEq.find("ul").wrap("<div class='block-list'></div>");
				listEq.find(".block-list").append(blockImg);
				listEq.find(".block-list").append("<div class='clear'></div>");
				listEq.find(".block-list").append("<span class='btn-ok' rel="+i+"></span>");
				widthAllUL = 0;
				countStolb = lengthListUL / 7 | 0;				
				if (countStolb > 0) {
					countStolb = countStolb + 1;
					for (f = 0; f < countStolb; f++) {
						b = f * 6;
						c = b + 6;				
						listEq.find("ul").last().after("<ul id="+ f +"></ul>");
						for (b = b; b < c; b++) {
							listEq.find("ul").first().find("li").eq(b).clone().appendTo(listEq.find("ul[id="+ f +"]"));
						}
					}
					listEq.find("ul").first().remove();
					for (d =0; d < listEq.find(".block-list ul").length; d++) {				
						listEq.find("ul[id="+ d +"] li").show();				
						widthAll = listEq.find("ul[id="+ d +"]").width();		
						widthAllUL = (widthAllUL + widthAll) + 9;				
					}
					listEq.find(".block-list").css("width", widthAllUL +"px");
				}				
				listEq.find(".block-list").find(".blockImg").find(".bg-bottom").css("width", (listEq.find(".block-list").find(".blockImg").width() - 40) +"px");
				listEq.find(".block-list").css("height", (listEq.find(".block-list").height() + 10)+"px");
				listEq.find(".block-list").hide();	
			}
			for (i = 0; i < opacity.length; i++) {
				list = opacity.find(".block-list").eq(i).find("ul");
				if (i == (opacity.length - 1) && list.length > 1) {
					widthMargin = (opacity.eq(i).find(".block-list").width() - opacity.eq(i).width()) + 21;
					opacity.find(".block-list").eq(i).css("margin-left", "-"+ widthMargin+"px");
				}
			}
			
			for (i = 0; i < opacity.length; i++) {
				listEq = opacity.eq(i);
				listEq.append('<ul class="list"></ul>');
				for (c = 0; c < 3; c++) {
					listEq.find(".block-list").find("ul").eq(0).find("li").eq(c).attr("id", c)
					listEq.find(".block-list").find("ul").eq(0).find("li").eq(c).clone().appendTo(".opacity:eq("+a+") .the-list:eq("+i+") .list");
				}
				if (listEq.find(".block-list").find("ul").eq(0).find("li").length > 4) {
					listEq.find(".list").append('<li class="all"><a href="javascript:void(0);">все</a></li>');
				}
				if (listEq.find(".block-list").find("ul").eq(0).find("li").length < 4) {
					listEq.find(".title").addClass("title-none").removeClass("title");
					
				}
			}
		// THIS END
		}
	}
	
	function showWindow() {		
		listEq = $('.opacity').find(".only");
		listEq.css("overflow","visible");
		listEq.css("position","inherit");
		listEq.find(".title").addClass("click");
		listEq.find(".block-list").addClass("active");
		listEq.find(".gradient-block").hide();
		listEq.find(".block-list").show();				
		listEq.find(".block-list").find(".blockImg").show();
		listEq.find(".block-list").find(".btn-ok").css("display","block");
		listEq.find(".block-list").find(".blockImg").css("height", (listEq.find(".block-list").height() + 50) +"px");
		listEq.find(".block-list").find(".blockImg").find(".bg-ul-img-l").css("height", (listEq.find(".block-list").height() + 30) +"px");
		listEq.find(".block-list").find(".blockImg").find(".bg-ul-img-r").css("height", (listEq.find(".block-list").height() + 30) +"px");	
		listEq.find(".block-list").find(".blockImg").find(".bg-ul-img").css("width", (listEq.find(".block-list").find(".blockImg").width() - 38) +"px");
		listEq.find(".block-list").find(".blockImg").find(".bg-bottom").css("width", (listEq.find(".block-list").find(".blockImg").width() - 38) +"px");
		listEq.find(".block-list").find(".blockImg").find(".bg-ul-img").css("height", (listEq.find(".block-list").height() + 30) +"px");
	}
	function hideWindow() {
		listEq = $('.opacity').find(".only");
		 $('.opacity').find(".only").removeClass('only');
		listEq.find(".block-list").removeClass("active");
		listEq.css("overflow","hidden");
		listEq.css("position","relative");
		listEq.find(".gradient-block").show();
		listEq.find(".block-list").hide();		
		listEq.find(".block-list").find(".img-bg").hide();
		listEq.find(".block-list").find(".btn-ok").css("display","none");
		listEq.find(".all").show();
		listEq.find(".block-list").find(".blockImg").hide();
	}
		
	ResizeTheList();
	
	
	$(window).resize(function() {
		Resize();	
	});
	
	$(".title").click(function() {
		$(this).parent().addClass("only");
		if ($(this).hasClass("click") == true) {
			hideWindow();
			$(".the-list").find(".title").removeClass("click");
		}
		else {
			thisBlock = $('.only .title');
			 if ($(".the-list").find(".block-list").hasClass("active") == true) {	
				hideWindow();
				$(".the-list").find(".title").removeClass("click");
				showWindow();
			 }
			 else {			 			 
				 showWindow();
			 }
		}
	});
	$(window).keypress(function(e) {
  			if (e.keyCode == 27) {
				hideWindow();
				$(".the-list").find(".title").removeClass("click");
			}
	});
	$(".btn-ok").click(function() {
		hideWindow();
		$(".the-list").find(".title").removeClass("click");	
	});
	$(".all a").click(function() {
		$(this).parent().parent().parent().addClass("only");
		thisBlock = $(".only").find(".title")
		showWindow();
	});
	$(".the-list").css("position","relative");
	var mouse_is_inside =false;
	$('.block-list').hover(function(){ 
			mouse_is_inside=true;
		},function(){ 
			mouse_is_inside=false;
    });
	$('.the-list .title').hover(function(){ 
			mouse_is_inside=true;
		},function(){ 
			mouse_is_inside=false;
    });
	$(".picker-category").mousedown(function(){ 		
        if(! mouse_is_inside) {
			hideWindow();
			$(".the-list").find(".title").removeClass("click");
		}
    });
	
	
	function clickThisList() {
		if (thisBlock.attr("checked")) {			
			if (ID == 0) {
				$(".this").find("ul li[id="+ ID +"]").find("input").attr('checked', true);	
			}
			if (ID == 1) {
				$(".this").find("ul li[id="+ ID +"]").find("input").attr('checked', true);	
			}
			if (ID == 2) {
				$(".this").find("ul li[id="+ ID +"]").find("input").attr('checked', true);	
			}
		}
		else {
			if (ID == 0) {
				$(".this").find("ul li[id="+ ID +"]").find("input").attr('checked', false);	
			}
			if (ID == 1) {
				$(".this").find("ul li[id="+ ID +"]").find("input").attr('checked', false);	
			}
			if (ID == 2) {
				$(".this").find("ul li[id="+ ID +"]").find("input").attr('checked', false);	
			}	
		}		
		$(".the-list").removeClass("this");		
	
	}
	$(".block-list ul li input").bind("click", function() {
		thisBlock = $(this);
		check = $(this).attr('checked');		
		$(this).parent().parent().parent().parent().addClass("this");
		ID = $(this).parent().attr("id");
		clickThisList();					
	});
	
	$(".list li input").click(function() {
		$(this).parent().parent().parent().addClass("this");	
		ID = $(this).parent().attr("id");	
		if ($(this).attr("checked")) {			
			if (ID == 0) {
				$(".this").find(".block-list").find("ul").eq(0).find("li[id="+ ID +"]").find("input").attr('checked', true);	
			}
			if (ID == 1) {
				$(".this").find(".block-list").find("ul").eq(0).find("li[id="+ ID +"]").find("input").attr('checked', true);	
			}
			if (ID == 2) {
				$(".this").find(".block-list").find("ul").eq(0).find("li[id="+ ID +"]").find("input").attr('checked', true);	
			}
		}
		else {
			if (ID == 0) {
				$(".this").find(".block-list").find("ul").eq(0).find("li[id="+ ID +"]").find("input").attr('checked', false);	
			}
			if (ID == 1) {
				$(".this").find(".block-list").find("ul").eq(0).find("li[id="+ ID +"]").find("input").attr('checked', false);	
			}
			if (ID == 2) {
				$(".this").find(".block-list").find("ul").eq(0).find("li[id="+ ID +"]").find("input").attr('checked', false);	
			}	
		}
		$(".the-list").removeClass("this");			
	});	
	
	
	
	
	$(".opacity").eq(0).animate({opacity : 1},1000);
	$(".opacity").eq(0).addClass('visible');
	
	$(".slide-menu li a").click(function() {
		
		$(".slide-menu li a").removeClass('active');
		$(this).addClass('active');
		$(".opacity").removeClass('visible');	
	
		$($(this).attr('rel')).addClass('visible');
		Resize();
		$($(this).attr('rel')).animate({opacity : 1},500, function() {
				
		});
		
		
	});
});